<!DOCTYPE html>
<html>
    <head>
        <title>Event binding cost</title>
        <style>
            #frame {
                width:100px;
                height:100px;
                background:black;
            }
            .dot {
                height:100px;
                width:100px;
                color:blue;
            }
            pre {
                position:absolute;
                top:120px;
                width:500px;
            }
        </style>
    </head>
    <body>
        <div id='frame'>
        </div>
        <pre id='report'></pre>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://raw.github.com/bestiejs/benchmark.js/v1.0.0/benchmark.js"></script>
    <script>
    var suite = new Benchmark.Suite;
    // add tests
    suite
    .add('with events', function() {
        d3.select('#frame').html('')
            .append('div')
            .attr({ 'class': 'dot' })
            .on('click', function() {});
    })
    .add('without events', function() {
        d3.select('#frame').html('')
            .append('div')
            .attr({ 'class': 'dot' });
    })
    .add('using remove', function() {
        d3.select('.dot').remove();
        d3.select('#frame')
            .append('div')
            .attr({ 'class': 'dot' })
            .on('click', function() {});
    })
    // add listeners
    .on('cycle', function(event) {
        document.getElementById('report').innerHTML +=
          String(event.target) + '\n';
    })
    .on('complete', function() {
        document.getElementById('report').innerHTML +=
          'Fastest is ' + this.filter('fastest').pluck('name') + '\n';
    })
    // run async
    .run({ 'async': true });
</script>
</body>
